<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>title</title>
  <link rel="stylesheet" href="/stylesheets/login.css">
</head>

<body>
  <div class="container">
    <header class="h_tab">
      <a class="login_txt" href="javascript:;">登录</a>
      <a class="login_point"> - </a>
      <a class="register_txt">注册</a>
    </header>

    <div class="content register_c">
      <form method="post">
        <input type="text" name="name" value="" placeholder="请输入账号">
        <p style="color:red" data-error="name"></p>

        <input type="password" name="password" value="" placeholder="请输入密码">
        <p style="color:red" data-error="password"></p>

        <input type="password" name="password" value="" placeholder="确认密码">
        <p style="color:red" data-error="confirm_password"></p>

        <input type="submit" name="" value="注册并登录">
      </form>
    </div>

    <div class="content login_c">
      <form method="post">
        <input type="text" name="name" value="" placeholder="请输入账号">
        <p style="color:red" data-error="name"></p>

        <input type="password" name="password" value="" placeholder="请输入密码">
        <p style="color:red" data-error="password"></p>

        <input type="submit" name="" value="登录">
      </form>
    </div>


  </div>
  <script type="text/javascript" src="/js/validate.js"></script>

  <script type="text/javascript">
    let login_txt = document.querySelector(".login_txt");
    let register_txt = document.querySelector(".register_txt");
    let divs = document.querySelectorAll(".content");
    let formRegister = divs[0].querySelector("form");
    let pRegisters = formRegister.querySelectorAll("p");
    let inputRegisters = formRegister.querySelectorAll("input");

    let formLogin = divs[1].querySelector("form");
    let pLogins = formLogin.querySelectorAll("p");
    let inputLogins = formLogin.querySelectorAll("input");

    function setSelect(selected, un_sel) {
      selected.setAttribute("class", "vis");
      un_sel.setAttribute("class", "");
    }

    function toggleDiv(selected, un_sel) {
      selected.setAttribute("class", "show");
      un_sel.setAttribute("class", "hidden");
    }
    login_txt.addEventListener("click", function() {
      setSelect(login_txt, register_txt);
      toggleDiv(divs[1], divs[0]);
    })
    register_txt.addEventListener("click", function() {
      setSelect(register_txt, login_txt);
      toggleDiv(divs[0], divs[1]);
    })
    <%if(title && title == "登录"){%>
    setSelect(login_txt, register_txt);
    toggleDiv(divs[1], divs[0]);
    <%}else{%>
    setSelect(register_txt, login_txt);
    toggleDiv(divs[0], divs[1]);
    <%}%>

    formRegister.onsubmit = function(event) {
      event.preventDefault();
      clearChild(pRegisters);
      let name = inputRegisters[0].value;
      let password = inputRegisters[1].value;
      let confirm_password = inputRegisters[2].value;
      let errors = register_validate(name, password, confirm_password);
      if (Object.keys(errors).length !== 0) {
        showError(JSON.stringify(errors), pRegisters);
      } else {
        request(inputRegisters, pRegisters);
      }
    }

    formLogin.onsubmit = function(event) {
      event.preventDefault();
      clearChild(pLogins);
      let name = inputLogins[0].value;
      let password = inputLogins[1].value;
      let errors = validate(name, password);
      if (Object.keys(errors).length !== 0) {
        showError(JSON.stringify(errors), pLogins);
      } else {
        request(inputLogins, pLogins);
      }
    }

    function clearChild(pDoms) {
      pDoms.forEach(v => {
        v.innerText = "";
      });
    }

    function showError(errors, pDoms) {
      if (errors && Object.keys(errors).length !== 0) {
        errors = JSON.parse(errors);
        if (errors.name) {
          pDoms[0].innerText = errors.name;
        } else if (errors.password) {
          pDoms[1].innerText = errors.password;
        } else if (errors.confirm_password && pDoms.length === 3) {
          pDoms[2].innerText = errors.confirm_password;
        } else {
          window.location = "/";
        }
      }
    }

    function request(inputDoms, pDoms) {
      let name = inputDoms[0].value;
      let password = inputDoms[1].value;
      let confirm_password = "";
      if (inputDoms.length === 4) {
        confirm_password = inputDoms[2].value;
        fetch("/login", {
            method: "POST",
            credentials: "include",
            body: JSON.stringify({
              name,
              password,
              confirm_password
            }),
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
            console.log(res);
            return res.text();
          })
          .then(errors => {
            console.log("result_register", errors);
            showError(errors, pDoms);
          })
      } else {
        fetch("/login", {
            method: "POST",
            body: JSON.stringify({
              name,
              password
            }),
            credentials: 'include',
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
            return res.text();
          })
          .then(errors => {
            showError(errors, pDoms);
          })
      }

    }
  </script>
</body>

</html>
